<template>
  <div>
    <div class="outDiv">
      <scroller lock-x>
        <div>
          <Header :aa="preUrl" :bb="urlType" contentTitle="提问详情" :rightIconShow="false" :whi="true"></Header>
          <div class="main">
            <!-- 提问详情 -->
            <div class="ques_detail">
              <div class="intro">
                <div class="avatarAndIdentity">
                  <img class="avatar" :src="questionObj.user_avatar" alt="">
                  <span :class="['identity', questionObj.user_type == 2 ? 'parent' : 'child']"></span>
                </div>
                <div class="nameAndTime">
                  <h3>{{ questionObj.user_name }}</h3>
                  <p>{{ questionObj.question_time }}</p>
                </div>
              </div>
              <div class="describe">{{ questionObj.title }}</div>
              <div class="placeArea">
                <span class="province">{{ provinceMsg }}</span>
                <span class="schoolTitle">{{ schoolTitle }}</span>
              </div>
            </div>

            <div class="ans_detail">
              <p>回复</p>

              <!-- 未回复时 -->
              <div class="noAnswer" v-if="!hasAnswer">
                <group class="textArea">
                  <x-textarea :max="500" :rows="5" placeholder="在此输入回复内容" :show-counter="false" v-model="replyContent" @on-blur="blurAdjust"></x-textarea>
                </group>
                <div class="btn">
                  <button @click="reply">发表回复</button>
                </div>
              </div>
            
              <!-- 有回复时 -->
              <div v-else>
                <div class="hasAnswer" v-for="(item, index) of answerData" :key="index">
                  <div class="middle_img">
                    <img :src="item.user_avatar" >
                  </div>
                  <div class="content">
                    <div class="content_title">
                      <div class="title_1">
                        <div>{{ item.user_name }}</div>
                        <p>{{ item.create_time }}</p>
                      </div>
                    </div>
                    <div class="suggestion">{{ item.text }}</div>
                  </div>
                </div>
              </div>
            </div>
            

          </div>
          <div style="width: 7.5rem;height: 1.5rem;"></div>
        </div>
      </scroller>
    </div>
  </div>  
</template>

<script>
import ls from 'store2'
import axios from '~/plugins/axios'
import Header from '~/components/HeaderPopup'
import { XTextarea, Group } from 'vux'
export default {
  components: {
    Header,
    XTextarea,
    Group,
  },
  mounted() {
    const type = this.$route.query.type;
    this.questionObj = JSON.parse(type);
    this.qId = this.questionObj.id;
    const userMsg = this.questionObj.user;
    this.provinceMsg = userMsg.area.labels.split(',')[0];
    this.schoolTitle = userMsg.school.title;
    this.getAnswer();
  },
  data() {
    return {
      preUrl: ls.get('preUrl'),
      urlType: ls.get('urlType'),
      hasAnswer: true,
      questionObj: {},
      answerData: [],
      qId: null,
      provinceMsg: '',
      schoolTitle: '',
      replyContent: '',
      // userImg: require('~/static/default_avatar.png')
    }
  },
  methods: {
    getAnswer() {
      this.$vux.loading.show();
      axios.get('/university/yx-questions/' + this.qId + '/answer').then(res => {
        if (res.data.length > 0) {
          this.hasAnswer = true;
          this.answerData = res.data;
        } else {
          this.hasAnswer = false;
          this.answerData = [];
        }
        this.$vux.loading.hide();
        
      }).catch((error) => {
        this.$vux.toast.text(error);
        this.$vux.loading.hide();
      })
    },
    reply() {
      this.$vux.loading.show();
      axios.post('/university/yx-questions/'+ this.qId +'/answer', {
        content: this.replyContent
      }).then(res => {
        console.log(res);
        this.getAnswer();
      }).catch((error) => {
        this.$vux.toast.text(error);
        this.$vux.loading.hide();
      })
    },
    blurAdjust(e) {
      // 文本框失去焦点
      // this.isFocus = false;
      setTimeout(() => {
        if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
          return
        }

        let result = 'pc';
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
          result = 'ios'
        } else if (/(Android)/i.test(navigator.userAgent)) { //判断Android
          result = 'android'
        }

        if (result = 'ios') {
          document.activeElement.scrollIntoViewIfNeeded(true);
        }
      }, 20)
    },
  },
}
</script>

<style lang="less" scoped>
  .outDiv {
		width: 100%;
		height: 100vh;
		// background: #fff;

		.main {
      
      .ques_detail {
        padding: 0.32rem 0.32rem 0.56rem;
        background: #fff;
        margin-bottom: 0.24rem;
        .intro {
          display: flex;
          justify-content: flex-start;
          margin-bottom: 0.24rem;
          .avatarAndIdentity {
            position: relative;
            width: 0.8rem;
            .avatar {
              width: 0.8rem;
              height: 0.8rem;
              border-radius: 50%;
            }
            .identity {
              display: inline-block;
              width: 0.8rem;
              height: 0.32rem;
              position: absolute;
              bottom: 0;
              left: 0;
            }
            .parent { 
              background: url('~/static/images/icon_patriarch.png') no-repeat;
              background-size: 100% 100%;
            }
            .child { 
              background: url('~/static/images/icon_student.png') no-repeat;
              background-size: 100% 100%;
            }
          }
          .nameAndTime {
            margin-left: 0.24rem;
            h3 {
              color: #222;
              font-size: 0.3rem;
              font-weight: bold;
              padding-bottom: 0.16rem;
              line-height: 0.26rem;
            }
            p {
              color: #c7c7c7;
              font-size: 0.28rem;
              line-height: 0.26rem;
            }
          }
        }

        .describe {
          color: #222;
          font-size: 0.3rem;
          line-height: 0.48rem;
          margin-bottom: 0.24rem;

        }

        .placeArea {

          span {
            color: #999;
            font-size: 0.26rem;
            display: inline-block;
            height: 0.53rem;
            line-height: 0.53rem;
            background: #F7F7FA;
            border-radius: 0.27rem;
            text-align: center;
            padding: 0 0.24rem;
          }

          .schoolTitle {
            margin-left: 0.24rem;
          }

        }

      }

      .ans_detail {
        background: #fff;
        padding: 0.56rem 0.32rem 1rem;
        
        >p {
          color: #222;
          font-size: 0.3rem;
          font-weight: bold;
          line-height: 0.42rem;
          margin-bottom: 0.32rem;
        }
        
        .noAnswer {
          .textArea {
            margin-bottom: 0.64rem;
            /deep/ .vux-x-textarea.weui-cell {
              background: rgba(247,247,250,1);
              border-radius: 0.1rem;
              border: 1px solid #E5E8ED;
            }
            /deep/ .weui-cells:before,  /deep/ .weui-cells:after {
              display: none !important;
            }
            /deep/ .weui-textarea { 
              background:rgba(247,247,250,1);
              // color: #c7c7c7;
              line-height: 0.4rem;
              font-size: 0.28rem;
            }
          }
  
          .btn {
            padding: 0 0.32rem;
            button {
              width: 100%;
              height: 0.88rem;
              line-height: 0.88rem;
              border-radius: 0.44rem;
              border: none;
              outline: none;
              background: #409EFF;
              color: #fff;
              font-size: 0.3rem;
              font-weight: bold;
              letter-spacing: 2px;
            }
          }
        }

        .hasAnswer {
          display: flex;
          justify-content: space-between;
          background-color: #FFF;
          padding: 0.4rem 0 0.2rem;
          border-bottom: 1px solid #E8E8E8;

          .middle_img {
            text-align: center;
            img {
              width: 0.9rem;
              height: 0.9rem;
              border-radius: 50%;
            }
          }
          .content {
            width: 85%;
            .content_title {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 0.25rem;
              .title_1 {
                padding-top: 0.1rem;
                div { 
                  font-size: 0.3rem;
                  font-weight: bold;
                  letter-spacing: 1px;
                  color: #222;
                }
                p {
                  font-size: 0.2rem;
                  color: #C7C7C7;
                  margin-top: 0.1rem;
                }
              } 
            }
            .suggestion {
              color: #222222;
              font-size: 0.28rem;
              line-height: 0.48rem;
              
            }
          }
        }
      }

    }
  }
</style>
